<template>
  <div class="counter-warp">
     <view class="top">
      <image :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051911434810505.jpg"></image>
      <text class="title">物业管理系统</text>
     </view>

     <div>
      <ZanTab v-bind="tab1" :componentId="'tab1'" :height="300" :handleZanTabChange="handleZanTabChange"/>
    </div>
    <view class="login" v-show="isLogin">
      <view class="father_accounts">
        <input class="accounts" v-model="account" maxlength="11" placeholder="手机号" />
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902000528864.jpg"></image>
      </view>
      <view class="father_accounts">
        <image class="icon_hide_show" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902024449900.jpg" v-show="!showEye" @click="hideShow"></image>
        <image class="icon_hide_close" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902054132148.jpg" v-show="showEye" @click="hideShow"></image>
        <input class="accounts" v-if="showEye" maxlength="15" type="password" v-model='password' placeholder="密码"/>
        <input class="accounts" v-else type="text" maxlength="15"  v-model='password' placeholder="密码"/>
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051901550179853.jpg"></image>
      </view>
      <button :class="canLogin ? 'btnCanLogin' : 'btnlogin'" :disabled="!canLogin" @click="tologin">登录</button>
      <view class="father_bottom">
          <navigator class="bottom_text left" target="miniProgram" open-type="navigate" app-id="wx526f8edd43993146" path="/pages/accounts/enterpriselogin/main" extra-data="foo: 'bar'" version="release">企业登录</navigator>
          <text class="bottom_text right" @click="toForgetPwd">忘记密码?</text>
      </view>
      <button class="wx-login" open-type="getUserInfo" @getuserinfo="getUserInfo">微信一键登录</button>

    </view>
    <view class="login" v-show="!isLogin">
      <view class="father_accounts">
        <input class="accounts" v-model="regist_account" maxlength="11" placeholder="手机号" />
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902000528864.jpg"></image>
      </view>
      <view class="father_accounts marginmini">
        <input class="accounts_verification" v-model="regist_verification" maxlength="6" placeholder="验证码" />
        <image class="acc_icon" :mode="aspectFit" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902014922557.jpg"></image>
        <button :class="canSend ? 'btn_verification_can_send' : 'btn_verification'" :disabled="!canSend" @click="toSendMsg">{{sendText}}</button>
      </view>
      <view class="father_accounts marginmini">
        <image class="icon_hide_show" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902024449900.jpg" v-show="!showEye" @click="hideShow"></image>
        <image class="icon_hide_close" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902054132148.jpg" v-show="showEye" @click="hideShow"></image>
        <input class="accounts" v-if="showEye" maxlength="15" type="password" v-model='regist_password' placeholder="密码"/>
        <input class="accounts" v-else type="text" maxlength="15"  v-model='regist_password' placeholder="密码"/>
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051901550179853.jpg"></image>
      </view>
      <view class="father_bottom">
          <text class="bottom_text left" @click="toEnterpriseLogin">企业登录</text>
      </view>
      <button :class="canRegister ? 'btnCanLogin' : 'btnlogin'" :disabled="!canRegister" @click="toRegister">注册</button>
      <view>
        <view class="father_bottom_text">
          <text class="protocal">点击注册即代表您已阅读并同意</text>
          <text class="protocal protocal_deal">《注册协议》</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
// Use Vuex
import api from '@/utils/api'
import ZanTab from 'mpvue-zanui/src/components/zan/tab'
import store from '@/store/store'

export default {
  components: {
    ZanTab
  },
  computed: {
    cookie () {
      return store.state.cookie
    }
  },
  data () {
    return {
      tab1: {
        list: [{
          id: 'login',
          title: '登录'
        }, {
          id: 'register',
          title: '注册'
        }],
        scroll: false,
        selectedId: 'login'
      },
      isLogin: true,
      showEye: true,
      time: 60,
      sendText: '获取验证码',
      passwordType: 'text',
      account: '',
      password: '',
      canLogin: false,
      canRegister: false,
      canSend: false,
      regist_account: '',
      regist_verification: '',
      regist_password: ''
    }
  },
  watch: {
    showEye (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal) {
        this.passwordType = 'text'
      } else {
        this.passwordType = 'password'
      }
    },
    account (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.password !== '') {
        this.canLogin = true
      } else {
        this.canLogin = false
      }
    },
    password (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.account !== '') {
        this.canLogin = true
      } else {
        this.canLogin = false
      }
    },
    regist_account (curVal, oldVal) {
      if (curVal !== '') {
        this.canSend = true
      } else {
        this.canSend = false
      }
      if (this.regist_password.length >= 6 && this.regist_verification.length === 6 && this.regist_account !== '') {
        this.canRegister = true
      } else {
        this.canRegister = false
      }
    },
    regist_verification (curVal, oldVal) {
      if (this.regist_password.length >= 6 && this.regist_verification.length === 6 && this.regist_account !== '') {
        this.canRegister = true
      } else {
        this.canRegister = false
      }
    },
    regist_password (curVal, oldVal) {
      if (this.regist_password.length >= 6 && this.regist_verification.length === 6 && this.regist_account !== '') {
        this.canRegister = true
      } else {
        this.canRegister = false
      }
    }
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange (e) {
      const {componentId, selectedId} = e
      this[componentId].selectedId = selectedId
      if (selectedId === 'login') {
        this.isLogin = true
      } else {
        this.isLogin = false
      }
    },
    // 点击一键登录，登录微信，获取 userInfo、code
    getUserInfo (e) {
      console.log(e)
      let that = this
      wx.login({
        success: function (res) {
          if (res.code) {
            console.log(res.code)
            that.opoauthaccount(res.code, e)
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    },
    // 判断后台数据库是否有openid
    opoauthaccount (code, e) {
      let that = this
      var param = {}
      param['code'] = code
      param['type'] = 3
      param['nickname'] = e.mp.detail.userInfo.nickName
      param['sex'] = e.mp.detail.userInfo.gender
      param['province'] = e.mp.detail.userInfo.province
      param['city'] = e.mp.detail.userInfo.city
      param['country'] = e.mp.detail.userInfo.country
      param['language'] = e.mp.detail.userInfo.language
      const opoauthaccount = api.opoauthaccount(param)
      opoauthaccount.then(d => {
        if (d.code === 200) {
          store.commit('setUserInfo', d.data)
          try {
            wx.setStorageSync('openid', d.data.openid)
          } catch (e) {}
          that.$router.push({ path: '/pages/home/main', isTab: true })
        } else if (d.code === 201) {
          that.$router.push({ path: '/pages/accounts/bindingcellphone/main', query: { openid: d.data.openid, unionid: d.data.unionid } })
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    tologin (code, e) {
      var that = this
      const oplogin = api.oplogin(that.account, that.password)
      oplogin.then(d => {
        if (d.code === 200) {
          var user = {}
          user['account'] = that.account
          user['cookie'] = that.cookie
          user['avatar'] = d.data.avatar
          user['userInfo'] = d.data
          store.commit('setUser', user)
          store.commit('setUserInfo', d.data)
          that.$router.push({ path: '/pages/home/main', isTab: true })
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    hideShow () {
      this.showEye = !this.showEye
    },
    toForgetPwd () {
      this.$router.push({ path: '/pages/accounts/forgetpassword/main' })
    },
    toGetCode (cellphone, type, code) {
      var that = this
      const opsentmsgcode = api.opsentmsgcode(cellphone, type, code)
      opsentmsgcode.then(d => {
        if (d.code === 200) {
          wx.showToast({
            title: '发送成功',
            icon: 'success'
          })
          that.canSend = false
          that.time = 60
          let interval = setInterval(function () {
            if ((that.time--) <= 0) {
              clearInterval(interval)
              that.canSend = true
              that.sendText = '获取验证码'
            } else {
              that.canSend = false
              that.sendText = that.time + 'S'
            }
          }, 1000)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    toSendMsg () {
      if (!/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.regist_account) || this.regist_account.length < 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'none'
        })
      } else {
        this.toGetCode(this.regist_account, 1, '')
      }
    },
    toRegister () {
      const opregister = api.opregister(this.regist_account, this.regist_password, this.regist_verification, 1)
      opregister.then(d => {
        if (d.code === 200) {
          wx.showToast({
            title: '注册成功',
            icon: 'success'
          })
          this.regist_account = ''
          this.regist_password = ''
          this.regist_verification = ''
          this.canRegister = false
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}

</script>
<style>
@import './login.css';
</style>
